<template>
  <o-modal
    v-model="isShow"
    :title="config.modalTitle"
    :size="config.modalSize || [700, 600]"
    :mask="true"
    :tap-close="true"
    :show-footer="true"
    @on-ok="confirm"
    @on-close="close"
    @on-cancel="close"
  >
    <div slot="content" class="transferbox clearfix">
      <!-- :compBoxInfo="GT_compBoxInfo" -->
      <o-users-select
        ref="usersSelectRef"
        :optionsList="selectebleApproversList"
      ></o-users-select>
    </div>
  </o-modal>
</template>

<script lang="ts">
import oModal from '@/components/base/modal/o-modal/index.vue';
import { T_srv } from '@/services';
import { Component, Prop, Vue } from 'vue-property-decorator';
import type oUsersSelectType from './usersSelect.vue';
import oUsersSelect from './usersSelect.vue';

interface config {
  modalTitle?: string;
  modalSize?: Array<number>;
  optionsList: Array<any>;
}

@Component({
  components: {
    oModal,
    oUsersSelect
  }
})
export default class cSelectApprovers extends Vue {
  /**
   * props
   */
  @Prop() config: config;

  @Prop() id: number;
  // @Prop() data: Array<data> = [];

  @T_srv.ref('usersSelectRef') usersSelectRef: oUsersSelectType;

  /**
   * data
   */
  private isShow: boolean = false;

  private selectebleApproversList: Array<any> = [];

  created() {
    this.selectebleApproversList = this.config.optionsList;
    this.show();
  }

  mounted() {}

  public show() {
    this.isShow = true;
  }

  public hide() {
    this.isShow = false;
  }

  public confirm() {
    const selectedUsers = (this.$refs.usersSelectRef as any).getSelectedUsers();
    this.$bus.$emit(`modal_${this.id}`, selectedUsers);
    this.hide();
  }

  public close() {
    this.$bus.$emit(`modal_${this.id}`);
    this.hide();
  }
}
</script>

<style lang="scss" scoped>
.transferbox {
  padding: 0 20px;
  height: 100%;
}
</style>
